<template>
  <div>
    <el-tiptap
        v-model="currentValue"
        :extensions="localConfigData"
        :width="width"
        :height="height"
        :showMenubar="showMenubar"
        :readonly="readonly"
        v-on="$listeners"
        class="tiptap"
    />
  </div>
</template>
<script>
import {
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  Image,
  Blockquote,
  Link,
  TextAlign,
  LineHeight,
  Indent,
  History
} from 'element-tiptap';

export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    showMenubar: {
      type: Boolean,
      default : true
    },
    readonly: {
      type: Boolean,
      default : false
    },
    configData: {
      type: Array,
      default : () => {
        return []
      }
    }
  },
  computed: {
    currentValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    },
    localConfigData () {
      if (!this.configData || this.configData.length === 0) {
        return this.extensions
      }
      return this.configData
    }
  },
  data() {
    return {
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({level: 5}),
        new Bold(),
        new Underline(),
        new Italic(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
        new Image(),
        new Blockquote(),
        new Link(),
        new TextAlign({
          alignments: ['left', 'center', 'right', 'justify'],
        }),
        new LineHeight({
          lineHeights: ['100%', '200%', '300%']
        }),
        new Indent({
          minIndent: 0,
          maxIndent: 7,
        }),
        new History()
      ]
    }
  }
}
</script>
<style scoped>
.tiptap >>> .el-tiptap-editor__content{
  padding: 10px;
}
.tiptap >>> .ProseMirror{
  height: 100%;
}
</style>
